<template>
  <div class="app-container">

    <el-table
      ref="multipleTable"
      :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      border
      fit
      highlight-current-row
      style="width: 95%;margin-top:20px;"
    >
      <el-table-column label="编号" width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="承运商名" width="130" align="center">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="地址" width="250" align="center">
        <template slot-scope="{row}">
          <span>{{ row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column label="联系方式" width="180" align="center">
        <template slot-scope="{row}">
          <span>{{ row.phone}}</span>
        </template>
      </el-table-column>
      <el-table-column label="负责人id" width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.userId}}</span>
        </template>
      </el-table-column>
      <el-table-column label="单位运输价格 元/（吨.千米）" width="130" align="center">
        <template slot-scope="{row}">
          <span>{{ row.unitPrice}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button icon="el-icon-search" type="primary" size="mini" @click="scanDesc(row)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      align="center"
      :current-page="currentPage"
      :page-sizes="[1,5,10,20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
      style="width: 95% ;margin-top:20px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog :title="textMap['desc']" :visible.sync="DescVisible" width="900px">
      <el-form ref="dataForm" :model="form" label-position="left" style="margin-left:70px;">
        <el-row>
          <el-col :span="10">
            <el-form-item label="承运商名称">
              <el-input v-model="form.name" readonly style="margin-right:20px; width: 220px" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="电话">
              <el-input v-model="form.phone" readonly style="margin-right:20px; width: 220px" />
            </el-form-item>
          </el-col>
        </el-row>
          <el-form-item label="地址">
            <el-input v-model="form.address" readonly style="margin-right:20px; width: 550px" />
          </el-form-item>
        <el-form-item label="单位运输价格 元/（吨.千米）">
          <el-input v-model="form.unitPrice" readonly style="margin-right:20px; width: 390px" />
        </el-form-item>
        <el-table
          :data="form.drivers"
          border
          fit
          highlight-current-row
          style="width: 87% ;margin-top:30px;"
        >
          <el-table-column label="司机用户名" width="150" align="center">
            <template slot-scope="{row}">
              <span>{{ row.userName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="司机真名" width="150" align="center">
            <template slot-scope="{row}">
              <span>{{ row.realName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="电话" width="200" align="center">
            <template slot-scope="{row}">
              <span>{{ row.phone}}</span>
            </template>
          </el-table-column>
          <el-table-column label="邮箱" width="185" align="center">
            <template slot-scope="{row}">
              <span>{{ row.email }}</span>
            </template>
          </el-table-column>
        </el-table>

        <el-table
          :data="form.trucks"
          border
          fit
          highlight-current-row
          style="width: 87% ;margin-top:30px;"
        >
          <el-table-column label="车牌号" width="180" align="center">
            <template slot-scope="{row}">
              <span>{{ row.number }}</span>
            </template>
          </el-table-column>
          <el-table-column label="载重" width="120" align="center">
            <template slot-scope="{row}">
              <span>{{ row.weight }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="155" align="center">
            <template slot-scope="{row}">
              <span>{{ row.state| stateFilter }}</span>
            </template>
          </el-table-column>
          <el-table-column label="信息" width="230" align="center">
            <template slot-scope="{row}">
              <span>{{ row.info }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </el-dialog>
  </div>

</template>

<script>
import { getCarrierList } from "../../api/carrier"
const stateTypeOptions = [
  { key: 0, display_name: '使用' },
  { key: 1, display_name: '空闲' },
  { key: 2, display_name: '损坏' },
]

const stateTypeKeyValue = stateTypeOptions.reduce((states, cur) => {
  states[cur.key] = cur.display_name
  return states
}, {})

export default {
  name: 'ComplexTable',
  filters: {
    stateFilter(type) {
      return stateTypeKeyValue[type]
    },


  },
  data() {
    return {
      stateTypeOptions,
      listQuery: {
        name: '金山货运'
      },
      form: {
        id: '',
        name: '',
        address: '',
        userId: '',
        unitPrice: '',
        drivers: [],
        trucks: []
      },
      state: null,
      options: [],
      DescVisible: false,
      textMap: {
        desc: '详情页面'
      },
      listQueryReturn: [],
      tableData: [],
      tableData1: [],
      multiSelection: [],
      nowDate: null,
      refresh: false,
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 10, // 每页的数据条数
      tabClickIndex: null,
      tabClickLabel: null
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      getCarrierList(this.listQuery).then(response => {
        console.log(this.listQuery)
        this.tableData = response.data.carrierList
      }).catch(error => {
        console.log(error)
      })
    },
    scanDesc(row) {
      this.form = Object.assign({}, row) // copy obj
      this.DescVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.currentPage = 1
      this.pageSize = val
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
    }
  }
}
</script>
